<clr-modal [(clrModalOpen)]="opened">
    <h3 class="modal-title">{{'APP_ADD'|translate}}</h3>
    <div class="modal-body modal-height">
        <app-modal-alert></app-modal-alert>
        <form clrForm #hostForm='ngForm'>
            <clr-input-container>
                <label>{{"APP_NAME"|translate}}</label>
                <input clrInput [size]="32" maxlength="30" name="name" [(ngModel)]="item.name" required/>
            </clr-input-container>
            <clr-input-container>
                <label>{{"APP_IP"|translate}}</label>
                <input clrInput [size]="32" name="ip" [(ngModel)]="item.ip" required/>
            </clr-input-container>
            <clr-input-container>
                <label>{{"APP_PORT"|translate}}</label>
                <input clrInput type="number" [size]="32" name="port" [(ngModel)]="item.port" required/>
            </clr-input-container>
            <clr-select-container>
                <label>{{"APP_CREDENTIAL"|translate}}</label>
                <select clrSelect [(ngModel)]="item.credentialId" name="credential" required>
                    <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                    <option *ngFor="let item of credentials" [value]="item.id">{{item.name}}</option>
                </select>
            </clr-select-container>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()"
                [disabled]="isSubmitGoing">{{'APP_CANCEL'|translate}}</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()"
                [disabled]="hostForm.invalid" [clrLoading]="isSubmitGoing">{{'APP_COMMIT'|translate}}
        </button>
    </div>
</clr-modal>
